﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery CSS Sizing and Positioning</title>
    <script type="text/javascript" src="../jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#height").html($("#theDiv").height());
            $("#width").html($("#theDiv").width());
            $("#innerH").html($("#theDiv").innerHeight());
            $("#innerW").html($("#theDiv").innerWidth());
            $("#outerH").html($("#theDiv").outerHeight());
            $("#outerW").html($("#theDiv").outerWidth());
            $("#offset").html($("#theDiv").offset().top + ", " + $("#theDiv").offset().left);
            $("#position").html($("#theDiv").position().top + ", " + $("#theDiv").position().left);
        });
    </script>
    <style type="text/css">
        div#theDiv {
            width: 250px;
            height: 180px;
            margin: 10px;
            padding: 20px;
            background: blue;
            border: 2px solid black;
            cursor: pointer;
        }
        p, span {
            font-size: 16pt;
        }
    </style>
</head>
<body>
    <p>
        Using jQuery to compute element size and position</p>
    <div id="theDiv">
    </div>
    <div><span>Height: </span><span id="height"></span></div>
    <div><span>Width: </span><span id="width"></span></div>
    <div><span>innerHeight: </span><span id="innerH"></span></div>
    <div><span>innerWidth: </span><span id="innerW"></span></div>
    <div><span>outerHeight: </span><span id="outerH"></span></div>
    <div><span>outerWidth: </span><span id="outerW"></span></div>
    <div><span>offset: </span><span id="offset"></span></div>
    <div><span>position: </span><span id="position"></span></div>
</body>
</html>
